<!--
* description: 批量下载
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="批量下载"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="800px"
      @close="close"
    >
      <dialogHeader slot="title" title="批量下载" :styleType="$store.state.app.dialogType"></dialogHeader>
      <div class="filter-container filter-params">
        <el-row :gutter="34" style="margin-bottom:5px;">
          <el-col :span="24">
            <div class="dialogTitle">
              <span class="dialogTitleButton">
                <el-button class="iconfont icon-batchSubmit" @click="batchDownload">批量下载</el-button>
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="26">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="400"
            border
            v-loading="listLoading"
          >
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="附件名称" prop="FILE_NAME" align="center"></el-table-column>
            <el-table-column label="附件大小" prop="FILE_SIZE" align="center"></el-table-column>
            <el-table-column label="上传时间" prop="UPLOAD_TIME" align="center"></el-table-column>
            <el-table-column label="附件下载" align="center">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  class="el-icon-download"
                  :underline="false"
                  @click="download(scope.row)"
                  title="下载"
                  style="font-size:12px;"
                >下载</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from "@/components/wms/mixins/formMixins";
import request from "@/utils/request";
export default {
  // 组件混入对象
  mixins: [formMixins],
  components: {
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  props: {
    isFileDownloadShow: { type: Boolean, default: false },
    talbeRowData: { type: Object, default: {} }
  },
  data() {
    return {
      // 显示加载中
      listLoading: false,
      // 是否显示
      showDialog: this.isFileDownloadShow,
      // 表格数据
      tableData: []
    };
  },
  created() {
    if (this.showDialog) {
      this.queryTable();
    }
  },
  methods: {
    download(row) {
      let aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = row.FILE_SRC;
      aLink.setAttribute("download", row.FILE_NAME);
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink); // 下载完成移除元素
    },
    batchDownload() {
      if (this.tableData.length > 0) {
        let aLink = document.createElement("a");
        aLink.style.display = "none";
        document.body.appendChild(aLink);
        this.tableData.forEach(item => {
          aLink.href = item.FILE_SRC;
          aLink.setAttribute("download", item.FILE_NAME);
          aLink.click();
        });
        document.body.removeChild(aLink); // 下载完成移除元素
      } else {
        this.$message({
          message: "目前没有可下载图片",
          uration: 2000
        });
      }
    },
    close() {
      this.showDialog = false;
      this.$emit("fileDownloadlose");
    },
    queryTable() {
      let reqData = {
        MATERIALS_STYLE_ID: this.talbeRowData.MATERIALS_STYLE_ID
      };
      this.listLoading = true;
      request({
        url: "/mp/wm/vl/warehouse/materialsStyle/queryFile.do",
        method: "post",
        data: reqData
      })
        .then(res => {
          this.listLoading = false;
          if (res.result === "1") {
            this.tableData =
              res.listRow && res.listRow.length > 0 ? res.listRow : [];
          } else {
            if (res.msg || res.debugMsg) {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                uration: 2000
              });
            }
          }
        })
        .catch(err => {
          console.info(err);
          this.listLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.dialogTitle {
  text-align: left;
  overflow: hidden;
}
.dialogTitleButton {
  float: right;
}
</style>